<template>
  <el-card style="margin: 20px">
    <el-row type="flex" justify="space-between">
      <el-col :span="15">
        <el-row type="flex" justify="start">
          <div style="display: flex">
            关键字
            <el-input v-model="params.keyword"></el-input>
          </div>

          <el-button style="margin-left: 10px">清空</el-button>
          <el-button type="primary" @click="search">搜索</el-button>
        </el-row>
      </el-col>
      <el-col :span="1">
        <el-button type="success" class="el-icon-edit" @click="adduser"
          >新增技巧</el-button
        >
      </el-col>
    </el-row>
    <el-alert
      style="margin-top: 20px"
      :title="`共${counts}条记录`"
      type="info"
      :closable="false"
      show-icon
    >
    </el-alert>

    <el-table style="margin-top: 20px" :data="userlist">
      <el-table-column type="index" label="序号"> </el-table-column>
      <el-table-column prop="title" label="文章标题"> </el-table-column>
      <el-table-column prop="visits" label="阅读数"> </el-table-column>
      <el-table-column prop="username" label="录入人"> </el-table-column>
      <el-table-column prop="createTime" label="录入时间"> </el-table-column>
      <el-table-column prop="state" label="状态"> </el-table-column>
      <el-table-column prop="date" label="操作" width="280">
        <template #default="{ row }">
          <el-link
            type="primary"
            style="margin: 0 10px"
            @click="look(row, row.id)"
            >预览</el-link
          >
          <el-link
            type="primary"
            style="margin: 0 10px"
            @click="changeUse(row, row.id)"
            >{{ USE }}</el-link
          >
          <el-link
            type="primary"
            style="margin: 0 10px"
            @click="change(row, row.id)"
            :disabled="row.state === '已禁用'"
            >修改</el-link
          >
          <el-link
            type="primary"
            style="margin: 0 10px"
            @click="removeUser(row, row.id)"
            :disabled="row.state === '已禁用'"
            >删除</el-link
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="block" style="margin: 25px">
      <el-pagination
        background
        @size-change="params.pagesize"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage3"
        :page-sizes="[10, 20, 30, 50]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="counts"
      >
      </el-pagination>
    </div>

    <!-- 弹框 -->

    <el-dialog
      @close="handleClose"
      :title="title"
      :visible.sync="dialogVisible"
      width="50%"
      :before-close="handleClose"
    >
      <div v-if="addView">
        <el-form ref="formRef" label-width="80px" v-model="formfull">
          <el-form-item label="标题" prop="stem">
            <el-input v-model="formfull.title"></el-input>
          </el-form-item>
          <el-form-item label="内容" prop="content">
            <quillEditor
              :options="editorOption"
              v-model="formfull.articleBody"
              @blur="$refs.formRef.validateField('content')"
            ></quillEditor>
          </el-form-item>
          <el-form-item label="视频地址" prop="stem">
            <el-input v-model="formfull.videoURL"></el-input>
          </el-form-item>
        </el-form>
      </div>

      <div v-if="changeView">
        <el-form ref="formRef" label-width="80px" v-model="formfull">
          <el-form-item label="标题" prop="stem">
            <el-input v-model="formfull.title"></el-input>
          </el-form-item>
          <el-form-item label="内容" prop="content">
            <quillEditor
              :options="editorOption"
              v-model="formfull.articleBody"
              @blur="$refs.formRef.validateField('content')"
            ></quillEditor>
          </el-form-item>
          <el-form-item label="视频地址" prop="stem">
            <el-input v-model="formfull.videoURL"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div v-if="lookList"></div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
  </el-card>
</template>

<script>
import {
  list,
  add,
  simple,
  remove,
  update,
  changeState,
  detail,
} from "@/api/hmmm/articles";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";

import { quillEditor } from "vue-quill-editor";
export default {
  components: { quillEditor },
  data() {
    return {
      lookList: false,
      state: "",
      USE: "",
      flag: false,
      formfull: {
        title: "",
        articleBody: "",
        videoURL: "",
      },
      id: "",
      changeView: false,
      title: "",
      addView: false,
      options: "",
      keyword: "",
      form: {
        subjectName: "",
        twoLevelDirectory: "",
        totals: "",
        tags: "",
        username: "",
        addDate: "",
        isFrontDisplay: "",
      },
      dialogVisible: false,
      currentPage3: null,
      username: "",
      pages: "",
      input: "",
      counts: null,
      userlist: [],
      params: {
        page: 1,
        pagesize: 10,
        keyword: "",
      },
      editorOption: {
        modules: {
          toolbar: {
            container: [
              ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线 -----['bold', 'italic', 'underline', 'strike']
              [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色-----[{ color: [] }, { background: [] }]
              [{ align: [] }], // 对齐方式-----[{ align: [] }]
              [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
              [{ direction: "ltl" }], // 文本方向-----[{'direction': 'rtl'}]
              [{ direction: "rtl" }], // 文本方向-----[{'direction': 'rtl'}]
              [{ indent: "-1" }, { indent: "+1" }], // 缩进-----[{ indent: '-1' }, { indent: '+1' }]
              [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表-----[{ list: 'ordered' }, { list: 'bullet' }]
              [{ script: "sub" }, { script: "super" }], // 上标/下标-----[{ script: 'sub' }, { script: 'super' }]
              ["blockquote", "code-block"], // 引用  代码块-----['blockquote', 'code-block']
              ["clean"], // 清除文本格式-----['clean']
              ["link", "image", "video"], // 链接、图片、视频-----['link', 'image', 'video']
            ],
          },
        },
      },
    };
  },
  methods: {
    async list() {
      const { data } = await list(this.params);
      this.userlist = data.items;
      this.counts = data.counts;
      this.pages = data.pages;
      // console.log(this.userlist);
      // console.log(data);
      this.userlist.forEach((item) => {
        if (item.state === 1) {
          item.state = "已启用";
          this.USE = "禁用";
        } else {
          item.state = "已禁用";
          this.USE = "启用";
        }
      });
    },
    handleCurrentChange(current) {
      this.params.page = current;
      this.list();
    },
    async search() {
      await list(this.params);

      this.list();
    },

    async adduser() {
      this.dialogVisible = true;
      this.addView = true;
      this.changeView = false;
      this.title = "新增文章";
      const { data } = await simple();
      this.options = data;
    },

    async change(row) {
      console.log(row);
      this.form = row;
      this.id = row.id;
      this.formfull = row;

      this.dialogVisible = true;
      this.addView = false;
      this.changeView = true;
      this.title = "修改学科";
      const { data } = await simple();
      this.options = data;
    },

    async removeUser(row, id) {
      console.log(id);
      const res = await remove(row, id);
      this.$message.success("删除用户成功");
      console.log(res);
      this.list();
    },

    handleClose() {
      this.dialogVisible = false;
      this.$refs.formRef.resetFields();
      this.form = {};
    },
    async submit() {
      console.log(111);
      if (this.title === "新增文章") {
        await add(this.formfull);
        this.$message.success("新增学科成功");
      } else {
        if (this.form.isFrontDisplay === true) {
          this.form.isFrontDisplay = 1;
        } else {
          this.form.isFrontDisplay = 0;
        }
        await update(this.formfull);
        this.$message.success("编辑学科成功");
      }

      this.dialogVisible = false;

      this.list();
    },

    async look(row, id) {
      const res = await detail(row, id);
      console.log(res);
      this.$message.success("修改查看成功");
      this.lookList = true;

      this.dialogVisible = false;
      this.addView = false;
    },

    async changeUse(row, id) {
      if (row.state === "已启用") {
        this.USE = "禁用";
        this.state=1
      } else {
        this.USE = "启用";
         this.state=0
      }

      console.log(row.state);
      console.log(row);


      const res = await changeState({ id, state: this.state });
      console.log(res);
      this.$message.success("修改状态成功");
     
      this.list();
    },
  },
  created() {
    this.list();
  },
};
</script>

<style scoped lang="scss"></style>
